<template>
  <el-form ref="formIns" :model="cate" :rules="rules" label-width="120px">
    <el-form-item label="分类名" prop="cateName">
      <el-input v-model="cate.cateName" placeholder="请输入分类名" clearable />
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input-number :min="0" v-model="cate.sort" placeholder="请输入排序" clearable />
    </el-form-item>
    <el-form-item label="显示隐藏" prop="cateState">
      <el-switch
        v-model="cate.cateState"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        :active-value="1"
        :inactive-value="0"
        active-text="显示"
        inactive-text="隐藏"
        inline-prompt
      />
    </el-form-item>
    <el-form-item label="父级分类" prop="pid">
      <el-tree-select
        v-model="cate.pid"
        :data="[
          {
            id: -1,
            cateName: '顶层分类',
          },
          ...cates,
        ]"
        check-strictly
        :props="{
          label: 'cateName',
          value: 'id',
        }"
        :render-after-expand="false"
      />
    </el-form-item>
    <el-form-item label="分类图标">
      <el-upload
        action="/api/upload"
        name="file"
        :data="{ a: 10 }"
        :show-file-list="false"
        accept=".jpg,.png,.gif,.jpeg"
        :on-success="uploadSuccess"
        :before-upload="beforeUpload"
      >
        <el-button>点击上传</el-button>
      </el-upload>
      <el-image :src="cate.cateIcon" style="width: 50px" />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="formIns.resetFields()">重置</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { Cate } from "@t/cate";
import { getCates, addCate } from "@a/cate";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const formIns = ref<any>(null);
// 表单校验规则
const rules = {
  cateName: [
    {
      required: true,
      message: "请输入分类名",
      trigger: "blur",
    },
  ],
};
// 待提交 新增商品
const cate: Cate = reactive({
  cateName: "",
  sort: 0,
  cateIcon: "",
  cateState: 1,
  pid: -1,
});
// 所有的分类 作为当前新增分类 父级分类
const cates = ref<Cate[]>([]);
const fetchCates = () => {
  getCates().then((res: any) => {
    if (res.code === 200) {
      cates.value = res.data;
    }
  });
};

onMounted(() => {
  fetchCates();
});
// 上传前钩子 限制文件体积
const beforeUpload = (file: any) => {
  if (file.size / 1024 / 1024 > 2) {
    ElMessage.error("文件大小不能超过2M");
    return false;
  } else {
    return true;
  }
};
// 图标上传成功
const uploadSuccess = (res: any) => {
  if (res.code === 200) {
    cate.cateIcon = res.data.url;
  }
};
// 提交表单
const submitForm = () => {
  formIns.value
    .validate()
    .then(() => {
      // 提交表单
      addCate(cate).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: res.msg,
            duration: 2000,
            onClose: () => {
              router.go(0);
            },
          });
        }
      });
    })
    .catch(() => {
      ElMessage.error("表单校验失败");
    });
};
</script>

<style scoped></style>
